<template>
  <view>
    <view class="page-body">
      <view class="page-section page-section-gap">
        <map id="myMap" style="width: 100%; height: 100vh;" 
		 :latitude="latitude" 
		 :longitude="longitude"
		  :scale="scale" 
		  :markers="markers" 
		  show-location=true 
		  enable-scroll 
		  @callouttap="callouttap" 
		  @regionchange="regionchange"
		   @updated="updated" 
		   @markertap="bindmarkertap"
		   :polyline="polyline">
        </map>
      </view>
      <view class="store-tips">
		
	
        <cover-view class="store-des-box" v-if="storeFlag">
			
          <cover-view class="store-des">
            <cover-view class="store-name">{{store.name}}</cover-view>  
            <cover-view class="store-address" style="
			text-overflow: -o-ellipsis-lastline;
			     overflow: hidden;
			     text-overflow: ellipsis;">
				{{store.address}}
			</cover-view>
            
          </cover-view>
		  <cover-view class="uni-padding-wrap uni-common-mt">
			<button class="dhbutton" 
			type="primary" plain="true" 
			size="mini" @tap="storeDesEvn"
			style="border-color: #007AFF;color: #007AFF;">导航</button>
		  </cover-view>
        </cover-view>
		<!-- bindmarkertap="clickbind" -->
        <!-- <cover-image v-if="storeAdFlag" class="store-ad" src="../../static/hch-position/ad.jpg"></cover-image> -->
        <!-- <cover-image v-if="storeAdFlag" class="store-clear" @tap="hideAd" src="../../static/hch-position/clear.png"></cover-image> -->
      </view>
	  <cover-view class="my-location">
	  	<cover-image class="img" src="https://course.jchen.art/static/images/icon-location.png" @click="getMyLocation"></cover-image>
	  </cover-view>
      <!-- <cover-view class="near-num">店{{distanceL}}千米</cover-view> -->
      <!-- <cover-image class="address-icon" src="../../static/hch-position/定位.png"></cover-image> -->
    </view>
  </view>
</template>

<script>
export default {
  props: {
    storeData: {
      type: Array,
      default: [
        
      ]
    },
    markers: {
      type: Array,
      default: [
        
      ]
    }
  },

  data() {
    return {
	polyline:[],
      store: {},
      storeFlag: false,
      storeAdFlag: true,
      distanceL: 0, //附近店门的距离
      latitude: 39.909,
      longitude: 116.39742,
      controls: [],
	  scale:8,
	  marker:[],
    }  
  },
  methods: {
    // 点击了dhlogo信息
    storeDesEvn() {
      uni.showToast({
        title: "自己自定义跳dhlogo详情页介绍",
        duration: 2000,
        icon: "none"
      })
    },
    // 点击气泡
    callouttap(e) {
      this.storeFlag = true
      this.storeAdFlag = false
      for (let i = 0; i < this.storeData.length; i++) {
        const ele = this.storeData[i]
        if (ele.id == e.markerId) {
          this.store = ele
          break
        }
      }
    },
    // 点击地图
    bindtap(id) {
      this.storeFlag = false
      // this.storeAdFlag=true;
    },
    // 隐藏广告图片
    hideAd() {
      this.storeAdFlag = false
    },
    updated() {
      let _this = this
      wx.getLocation({//onLocationChange
        type: "gcj02", //返回可以用于wx.openLocation的经纬度
        success: function(res) {
          _this.latitude = res.latitude
          _this.longitude = res.longitude
		  
          // _this.nearDistance(_this.markers, _this.latitude, _this.longitude)
        },
        fail: function(res) {
          console.log(res)
        }
      })
    },
	bindmarkertap(e){
		this.storeFlag = true
		this.storeAdFlag = false
		for (let i = 0; i < this.storeData.length; i++) {
		  const ele = this.storeData[i]
		  if (ele.id == e.markerId) {
		    this.store = ele
		    break
		  }
		}
		for (let i = 0; i < this.markers.length; i++) {
		  const ele = this.markers[i]
		  if (ele.id == e.markerId) {
		    this.marker = ele
		    break
		  }
		}
		
		console.log(this.marker)
		// this.gotolat = this.markers[e.markerId].latitude
		// this.gotolon = this.markers[e.markerId].longitude
	},
	getMyLocation() {
		var mapCtx = wx.createMapContext("myMap", this)
		// this.map = uni.createMapContext("map", this); 
		mapCtx.moveToLocation();
	},
	storeDesEvn(){
		wx.openLocation({
	        type: 'gcj02',
	        latitude: this.marker.latitude,
	        longitude: this.marker.longitude,
	        name: this.store.address,
	        scale: 28
	      })
		console.log(this.marker)
	},
    // 改变视野时改变经纬度
    regionchange(e) {
      let _this = this
      // 使用 wx.createMapContext 获取 map 上下文 this必须要写 不然没办法得到回调！！！！。
      var mapCtx = wx.createMapContext("myMap", this)
      mapCtx.getCenterLocation({
        success: function(res) {
          _this.centerLatitude = res.latitude
          _this.centerLongitude = res.longitude
          _this.nearDistance(
            _this.markers,
            _this.centerLatitude,
            _this.centerLongitude
          )
        },
        fail: function(res) {
          console.log(res)
        }
      }) //获取当前地图的中心经纬度
    },
    // 两点间距离
    distance(la1, lo1, la2, lo2) {
      var La1 = (la1 * Math.PI) / 180.0
      var La2 = (la2 * Math.PI) / 180.0
      var La3 = La1 - La2
      var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0
      var s =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(La3 / 2), 2) +
              Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)
          )
        )
      s = s * 6378.137 //地球半径
      s = Math.round(s * 10000) / 10000
      return s
    },
    // 计算最近的距离
    nearDistance(array, centerLatitude, centerLongitude) {
      let temp = []
      for (let i = 0, l = array.length; i < l; i++) {
        const element = array[i]
        let d = this.distance(
          element.latitude,
          element.longitude,
          centerLatitude,
          centerLongitude
        )
        temp.push(d)
      }
      this.distanceL = Math.min.apply(null, temp)
    }
  },
  onShow() {},
  onReady() {
	  
  }
}
</script>

<style lang="scss" scoped>
	.dhbutton{
		float: right;
		width: 122rpx;
		background-color: blue($color: #0055ff);
	}
.content {
  text-align: center;
  height: 400rpx;
}
.my-location {
	position: fixed;
		right: 30rpx;
		bottom: 200rpx;
	
		.img {
			width: 70rpx;
		}
	}
.page-section {
  z-index: 0;
}
.store-tips {
  width: 90%;
  // height: 100rpx;
  margin: 10rpx auto;
  border-radius: 10rpx;
  position: absolute;
  bottom: 10rpx;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 2;
  overflow: hidden;
  .store-des-box {
    background: #fff;
	padding: 30rpx 10rpx;
  }
  .store-img {
    width: 80rpx;
    height: 80rpx;
    border-radius: 10rpx;
    margin: 10rpx;
    float: left;
  }
  .store-des {
    padding-top: 8rpx;
	width: 70%;
    float: left;
    line-height: 1;
    font-size: 30rpx;
    color: #666;
    padding-left: 20rpx;
	
    .store-name {
      font-weight: 600;
	  font-size: 40rpx;
	  margin-bottom: 10rpx;
      color: #038A4E;
    }
  }
  .store-clear {
    width: 30rpx;
    height: 30rpx;
    position: absolute;
    top: 7rpx;
    right: 7rpx;
    margin: 30rpx;
  }
}
.address-icon {
  width: 38rpx;
  height: 40rpx;
  position: absolute;
  top: 22%;
  left: 50%;
  z-index: 2;
  margin-bottom: -20rpx;
  margin-left: -20rpx;
}
.near-num {
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  position: absolute;
  top: 17%;
  left: 50%;
  z-index: 2;
  font-size: 24rpx;
  background: #fff;
  transform: translate(-50%, 0);
}
</style>
